<template>
  <!-- 服务跟踪表格 -->
  <h2>服务跟踪表</h2>
    <el-table :data="serviceTracks" border style="width: 100%">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="openEditTrackDialog(scope.row)" type="text">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

  <!-- 服务跟踪修改弹窗 -->
    <el-dialog title="编辑服务跟踪" v-model="trackDialogVisible" width="40%">
      <el-form label-width="80px">
        <el-form-item label="状态">
          <el-select v-model="editStatus" placeholder="请选择状态">
            <el-option label="已创建" value="CREATED"></el-option>
            <el-option label="已确认" value="CONFIRMED"></el-option>
            <el-option label="已开始" value="STARTED"></el-option>
            <el-option label="已完成" value="COMPLETED"></el-option>
            <el-option label="已取消" value="CANCELLED"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="editRemark" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="trackDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitTrackUpdate">提交</el-button>
        </span>
      </template>
    </el-dialog>
</template>

<script>
import EditProfileDialog from '@/components/EditProfileDialog.vue'
import axios from "@/request/request.js"

export default {
  name: 'EscortHomeView',
  components: { EditProfileDialog },
  data() {
    return {
      activeIndex: '2',
      currentPageTitle: '服务跟踪信息',
      editDialogVisible: false,

        serviceTracks: [], // 用于存储服务跟踪数据
        selectedServiceTrack: null, // 当前选择的服务跟踪
        editStatus: '', // 编辑状态
        editRemark: '', // 编辑备注
        trackDialogVisible: false ,// 控制弹窗显示
      loading: true // 加载状态
    }
  },
  created() {
    this.fetchServiceTracks();
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    async submitTrackUpdate() {
      if (!this.editStatus) {
        this.$message.warning('请选择状态');
        return;
      }

      try {
        const res = await axios.put('/v1/escort/status-update', {
          id: this.selectedServiceTrack.id,
          status: this.editStatus,
          remark: this.editRemark
        }, { withCredentials: true });

        if (res.data.state === 2000) {
          this.$message.success('状态和备注更新成功');
          this.trackDialogVisible = false;
          this.fetchServiceTracks(); // 刷新跟踪列表
        } else {
          this.$message.error('更新失败');
        }
      } catch (error) {
        console.error(error);
        this.$message.error('网络异常，更新失败');
      }
    },
    /*编辑对应方法*/
    openEditTrackDialog(track) {
      this.selectedServiceTrack = track;
      this.editStatus = track.status;
      this.editRemark = track.remark;
      this.trackDialogVisible = true;
    },
    /*获取服务跟踪列表*/
    async fetchServiceTracks() {
      try {
        const res = await axios.get('/v1/escort/service-track', { withCredentials: true });
        if (res.data.state === 2000) {
          // 转换状态字段为中文
          const statusMap = {
            CREATED: '已创建',
            CONFIRMED: '已确认',
            STARTED: '已开始',
            COMPLETED: '已完成',
            CANCELLED: '已取消'
          };
          this.serviceTracks = res.data.data.map(track => ({
            ...track,
            status: statusMap[track.status] || track.status // 如果没有对应值保持原样
          }));
        } else {
          this.$message.error('获取服务跟踪失败');
        }
      } catch (error) {
        console.error(error);
        this.$message.error('网络异常，无法获取服务跟踪');
      }
    },
    logout() {
      this.$confirm('您确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.post('/v1/escort/logout', {}, {withCredentials: true})
        this.$router.push('/login')
      }).catch(() => {
        // 取消操作
      });
    },
  }
}
</script>

<style scoped>
/* 页面整体样式 */
.main-content {
  padding: 20px;
  background-color: #f5fafc;
}

h2 {
  color: #333;
  font-size: 24px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #c4e2fb;
  position: relative;
}

h2::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100px;
  height: 2px;
  background-color: #409eff;
}

/* 表格样式优化 */
.el-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(196, 226, 251, 0.3);
  transition: box-shadow 0.3s ease;
}

.el-table:hover {
  box-shadow: 0 6px 16px rgba(196, 226, 251, 0.5);
}

.el-table th {
  background-color: #e6f2ff;
  color: #333;
  font-weight: 500;
}

.el-table td {
  padding: 12px 0;
  transition: background-color 0.2s ease;
}

.el-table__row:hover td {
  background-color: #f0f9ff !important;
}

/* 状态列样式 */
.el-table .status-column {
  font-weight: 500;
  border-radius: 4px;
  padding: 3px 8px;
  display: inline-block;
  min-width: 60px;
  text-align: center;
}

.el-table .status-CREATED {
  background-color: #f0f9ff;
  color: #409eff;
}

.el-table .status-CONFIRMED {
  background-color: #e8f5e9;
  color: #4caf50;
}

.el-table .status-STARTED {
  background-color: #fff3e0;
  color: #ff9800;
}

.el-table .status-COMPLETED {
  background-color: #e0f7fa;
  color: #00acc1;
}

.el-table .status-CANCELLED {
  background-color: #fbe9e7;
  color: #ff5722;
}

/* 操作按钮样式 */
.el-button--text {
  color: #409eff;
  transition: all 0.2s ease;
}

.el-button--text:hover {
  color: #3080e0;
  transform: translateY(-1px);
}

/* 弹窗样式优化 */
.el-dialog {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(196, 226, 251, 0.5);
}

.el-dialog__header {
  background-color: #e6f2ff;
  border-radius: 12px 12px 0 0;
  padding: 20px;
}

.el-dialog__title {
  color: #333;
  font-size: 18px;
  font-weight: 500;
}

.el-dialog__body {
  padding: 30px 20px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-form-item__label {
  color: #555;
}

.el-input__inner,
.el-select__inner {
  border-radius: 6px;
  transition: border-color 0.2s ease;
}

.el-input__inner:focus,
.el-select__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

/* 提交按钮样式 */
.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.el-button--primary:hover {
  background-color: #3080e0;
  border-color: #3080e0;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

/* 加载状态样式 */
.loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  border-radius: 8px;
}

.loading-spinner {
  color: #409eff;
  font-size: 24px;
}
</style>
